<template>
  <div>
    <div>
      <homePage></homePage>
    </div>
    <div class="top_block">
      <div class="top_left">
        <img
          class="head_portrait"
          src="../assets/scholarProfile/用户头像.png"
        />
        <div>
          <button class="button" v-if="isClaimed==false" @click="to_scholar_claim">认证学者</button>
          <button class="button2" v-if="isClaimed==true">已被认证</button>
          <el-popover
            placement="bottom-start"
            width="150"
            trigger="hover"
            content="关注该学者, 随时获取最新资讯"
          >
            <i
              class="fa fa-heart-o"
              slot="reference"
              v-if="isFollowed === false || isLogin==false"
              @click="follow"
            ></i>
            <i
              class="fa fa-heart"
              slot="reference"
              v-if="isFollowed === true"
              @click="unfollow"
            ></i>
          </el-popover>
          <div style="display:inline-block;" v-if="isClaimed==true">
            <p class="claimed_user">用户: {{claimed_user_name}} 已认证</p>
            <p class="private_chat" @click="to_private_chat">（去私信）</p>
          </div>
        </div>
      </div>
      <div class="top_right">
        <div style="display: inline-block">
          <p class="scholar_name">{{ scholarName }}</p>
          <p class="follow" v-if="isFollowed === true">你的关注</p>
          <p
            class="institution"
            v-if="cur_org !== undefined && cur_org.length >= 1"
          >
            {{ cur_org }}
          </p>
        </div>
        <div class="scholarID">
          <p class="scholarID_word1">ScholarID：</p>
          <p class="scholarID_word2">{{ scholarID }}</p>
        </div>
        <div style="margin-top: 10px">
          <div class="top_title_block1">
            <p class="top_title">H指数</p>
            <p class="top_data">{{ h_index }}</p>
          </div>
          <!-- <div class="top_title_block2">
            <p class="top_title">G指数</p>
            <p class="top_data">193</p>
          </div> -->
          <div class="top_title_block2">
            <p class="top_title">成果数</p>
            <p class="top_data">{{ n_pubs }}</p>
          </div>
          <div class="top_title_block3">
            <p class="top_title">被引频次</p>
            <p class="top_data">{{ n_citation }}</p>
          </div>
          <div style="display: inline-block">
            <i title="分享"
              ><img
                style="
                  cursor: pointer;
                  border-radius: 50%;
                  width: 22px;
                  height: 22px;
                  margin-bottom: -3px;
                  margin-left: 20px;
                "
                @click="copyLink"
                src="../assets/paperInfo/share.png"
            /></i>
          </div>
          <i class="el-icon-warning" @click="set_dialog"></i>
          <el-dialog
            title="申诉学者"
            :visible.sync="dialogVisible"
            center
            width="30%"
          >
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <el-form>
                <el-form-item>
                  <p class="report_title">申诉标题</p>
                  <input
                    class="report_title_input"
                    type="text"
                    v-model="report_title"
                    placeholder="我才是这个学者"
                  />
                </el-form-item>
                <el-form-item>
                  <p class="report_content">申诉内容</p>
                  <textarea
                    class="report_content_input"
                    rows="5"
                    v-model="report_content"
                    placeholder="该学者是我，下面是我的证据..."
                  ></textarea>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="reset_input">取消</el-button>
              <el-button type="primary" @click="report_error">提交</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle_left">
        <!-- <div class="graph_part">
            <p class="graph_part_title">研究领域词云图</p>
            <word-cloud></word-cloud>
          </div> -->
        <!-- <div class="graph_part1">
          <div class="pie_chart">
            <div class="pie1"><pieChart :type="0" :data="83.4"></pieChart></div>
            <div class="pie2"><pieChart :type="1" :data="9.6"></pieChart></div>
            <div class="pie3"><pieChart :type="2" :data="0.4"></pieChart></div>
            <div class="pie4"><pieChart :type="3" :data="3.8"></pieChart></div>
            <div class="total_pie">
              <p class="total_pie_title">总计</p>
              <p class="total_pie_num">815 篇</p>
            </div>
          </div>
        </div>
        <div class="graph_part2">
          <div class="line1">
            <lineChart1 :data="line_data1"></lineChart1>
            <p class="line_chart_title">近7年成果数统计</p>
          </div>
          <div class="line2">
            <lineChart2 :data="line_data2"></lineChart2>
            <p class="line_chart_title">近7年被引量统计</p>
          </div>
        </div> -->
        <div class="papers">
          <div class="paper_select">
            <el-select
              size="small"
              style="width: 100px"
              v-model="filterForm.year"
              placeholder="请选择"
            >
              <el-option
                v-for="item in yearsList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-select
              size="small"
              style="width: 100px"
              v-model="filterForm.type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typesList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
            <el-select
              size="small"
              style="width: 100px"
              v-model="filterForm.author"
              placeholder="请选择"
            >
              <el-option
                v-for="item in authorsList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              size="small"
              style="width: 115px"
              v-model="sort_type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in sortsList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div
            class="paper_show"
            v-for="item in this.result.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )"
            :key="item.paperID"
          >
            <div style="margin-top: -20px">
              <p class="paper_title" @click="to_paper_info(item.i)">
                {{ item.title }}
              </p>
            </div>
            <div class="paper_info">
              <p class="paper_time">{{ item.year }}</p>
              <p
                v-html="joint_author_and_refers(item.authors, item.n_citation)"
                class="paper_author"
              ></p>
              <!-- <p class="paper_type">{{ typesList[item.type].label }}</p> -->
            </div>
          </div>
          <div style="text-align: center; margin-top: 15px">
            <el-pagination
              layout="prev, pager, next"
              :total="result.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="middle_right">
        <div class="co_scholar">
          <p class="co_scholar_title">合作学者</p>
          <div
            style="display: flex; align-items: center"
            v-for="item in this.filter_cooperater"
            :key="item.id"
          >
            <div style="display: inline-block">
              <img
                src="../assets/scholarProfile/合作学者头像.png"
                style="height: 50px; width: 50px"
              />
            </div>
            <div style="display: inline-block; margin-left: 4%">
              <p class="co_scholar_name" @click="to_scholar_profile(item.id)">
                {{ item.name }}
              </p>
              <p class="co_scholar_institution">{{ item.org }}</p>
            </div>
          </div>
        </div>
        <div class="co_institution">
          <!-- <p class="co_scholar_title">合作机构</p>
          <div
            v-for="item in this.co_ins_list"
            :key="item.name"
          >
          <div style="margin-top:-10px;"><p class="co_ins_name">{{item.name}}</p>
            <p class="co_ins_num">({{item.num}})</p></div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="bottom_info">
      <bottom-info></bottom-info>
    </div>
  </div>
</template>

<script>
import bottomInfo from "../components/bottomInfo.vue";
import homePage from "../components/homePage.vue";
/* import $ from  'jquery'; */
/* import wordCloud from "../components/wordCloud.vue"; */
/* import pieChart from "../components/pieChart.vue";
import lineChart1 from "../components/lineChart1.vue";
import lineChart2 from "../components/lineChart2.vue"; */

export default {
  data() {
    return {
      isLogin: false,
      claimed_user_name: "qqq",
      claimed_user_id: "",
      dialogVisible: false,
      report_title: "",
      report_content: "",
      h_index: 0,
      n_pubs: 0,
      pubs: [],
      cooperator: [],
      filter_cooperater: [],
      n_citation: 0,
      orgs: [],
      cur_org: [],
      currentPage: 1,
      pageSize: 10,
      isFollowed: false,
      isClaimed: false,
      authData: {},
      /* pie_data: [83.4,9.6,0.4,3.8],
      line_data1: [12, 18, 23, 21, 6, 10, 5],
      line_data2: [2530, 1785, 1140, 155, 1, 10, 269], */
      filterForm: {
        year: "",
        type: "",
        author: "",
      },
      sort_type: "",
      result: [],
      yearsList: [],
      /* scholarName: "毛景文", */
      scholarName: "",
      scholarID: "",
      /* co_ins_list:[
        {
          name:"中国地质科学院矿产资源研究所",
          num:"1040",
        },
        {
          name:"中国地质大学地球科学与资源学院",
          num:"155",
        },
        {
          name:"西北有色地质勘查局",
          num:"84",
        },
        {
          name:"中国地质调查局",
          num:"68",
        },
        {
          name:"中国地质科学院",
          num:"58",
        },
        {
          name:"中国地质大学",
          num:"48",
        },
        {
          name:"国家地质实验测试中心",
          num:"41",
        },
        {
          name:"中国地质科学院地质研究所",
          num:"41",
        },
      ], */
      /* co_scholar_list:[
        {
          scholarID:"0",
          name:"谢桂青",
          institution:"中国地质科学院矿产资源研究所",
        },
        {
          scholarID:"1",
          name:"叶会寿",
          institution:"西北有色地质勘查局",
        },
        {
          scholarID:"3",
          name:"张作衡",
          institution:"中国地质科学院",
        },
        {
          scholarID:"4",
          name:"王义天",
          institution:"国家地质实验测试中心",
        },
      ], */
      typesList: [
        {
          value: "0",
          label: "全部类型",
        },
        {
          value: "1",
          label: "期刊",
        },
        {
          value: "2",
          label: "会议",
        },
        {
          value: "3",
          label: "专著",
        },
      ],
      authorsList: [
        {
          value: "0",
          label: "全部作者",
        },
        {
          value: "1",
          label: "第一作者",
        },
      ],
      sortsList: [
        {
          value: "0",
          label: "按时间降序",
        },
        {
          value: "1",
          label: "按被引降序",
        },
      ],
      paperList: [
        {
          paperID: "0",
          title: "大别山汤家坪斑岩钼矿床含矿岩体地球化学及成因研究",
          type: "1", //1期刊, 2会议, 3专著
          time: "2014",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "0",
        },
        {
          paperID: "1",
          title:
            "小秦岭金钼多金属矿集区区域地质地球化学特征、成矿模式与找矿方向",
          time: "2007",
          type: "2",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "0",
        },
        {
          paperID: "2",
          title: "湖南柿竹园钨锡钼铋多金属矿床地质与地球化学",
          time: "2006",
          type: "3",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "141",
        },
        {
          paperID: "3",
          title: "中国东部大规模成矿时限及其动力学背景的初步探讨",
          time: "2000",
          type: "1",
          author: ["毛景文", "王志良"],
          refers: "212",
        },
        {
          paperID: "4",
          title: "东天山晚古生代内生金属矿床成矿系列和成矿规律",
          time: "2015",
          type: "2",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "32",
        },
        {
          paperID: "5",
          title: "大别山汤家坪斑岩钼矿床含矿岩体地球化学及成因研究",
          time: "2012",
          type: "3",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "564",
        },
        {
          paperID: "6",
          title:
            "小秦岭金钼多金属矿集区区域地质地球化学特征、成矿模式与找矿方向",
          time: "1998",
          type: "1",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "3",
        },
        {
          paperID: "7",
          title: "湖南柿竹园钨锡钼铋多金属矿床地质与地球化学",
          time: "2021",
          type: "2",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "15",
        },
        {
          paperID: "8",
          title: "中国东部大规模成矿时限及其动力学背景的初步探讨",
          time: "2004",
          type: "3",
          author: ["毛景文", "王志良"],
          refers: "1005",
        },
        {
          paperID: "9",
          title: "东天山晚古生代内生金属矿床成矿系列和成矿规律",
          time: "2011",
          type: "1",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "45",
        },
        {
          paperID: "10",
          title: "四川牦牛坪稀土矿床地幔流体成矿的碳氢氧硫同位素证据",
          time: "2005",
          type: "2",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "7",
        },
        {
          paperID: "11",
          title:
            "贵州贞丰(烂泥沟)金矿床含砷黄铁矿和脉石英及其包裹体的稀土元素特征",
          time: "1995",
          type: "3",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "853",
        },
        {
          paperID: "12",
          title: "新疆东天山铜及其多金属矿床成矿系列研究",
          time: "2020",
          type: "1",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "742",
        },
        {
          paperID: "13",
          title: "铅锌矿床中矿石铅同位素研究",
          time: "2018",
          type: "2",
          author: ["毛景文", "王志良"],
          refers: "56",
        },
        {
          paperID: "14",
          title: "Kiruna型铁矿床基本地质特征和成矿环境",
          time: "2015",
          type: "3",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "123",
        },
        {
          paperID: "15",
          title: "金属矿床地球化学的研究前沿",
          time: "2006",
          type: "1",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "2",
        },
        {
          paperID: "16",
          title: "云南个旧卡房铜矿地质地球化学与矿床成因探讨",
          time: "2001",
          type: "2",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "9",
        },
        {
          paperID: "17",
          title:
            "The Mississippi Valley-type Lead-zinc Deposits along the Southwest Margin of the Yangtze Block, China",
          time: "2021",
          type: "3",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "153",
        },
        {
          paperID: "18",
          title: "东天山古生代内生金属矿床类型和成矿作用动力学演化规律",
          time: "2004",
          type: "1",
          author: ["毛景文", "王志良"],
          refers: "1455",
        },
        {
          paperID: "19",
          title: "广西一洞五地锡矿床的围岩蚀变研究",
          time: "2011",
          type: "2",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "2394",
        },
        {
          paperID: "20",
          title: "钨矿床研究态势",
          time: "2014",
          type: "3",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "0",
        },
        {
          paperID: "21",
          title:
            "粤西阳春多金属矿集区锡山钨锡多金属矿床地质特征及成岩成矿时代研究",
          time: "2007",
          type: "1",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "78",
        },
        {
          paperID: "22",
          title: "新疆阿合奇县布隆石英-重晶石脉型金矿成矿机理探讨",
          time: "2006",
          type: "2",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "1419",
        },
        {
          paperID: "23",
          title:
            "Ore-controlling tectonics and dating on altered clay mineral of MVT deposits in Sichuan, Yunnan and Guizhou Provinces, China",
          time: "2000",
          type: "3",
          author: ["毛景文", "王志良"],
          refers: "21",
        },
        {
          paperID: "24",
          title: "长江中下游大型矿集区燕山期岩浆岩的成因和构造背景",
          time: "2015",
          type: "1",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "3",
        },
        {
          paperID: "25",
          title: "广西大厂锡多金属矿床成因研究评述",
          time: "2012",
          type: "2",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "56",
        },
        {
          paperID: "26",
          title: "大兴安岭中南段布敦化铜矿床同位素地球化学特征",
          time: "1998",
          type: "3",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "35",
        },
        {
          paperID: "27",
          title: "安徽省庐枞盆地巴家滩岩体中矿化包体的发现及其意义",
          time: "2021",
          type: "1",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "152",
        },
        {
          paperID: "28",
          title: "大陆动力学与成矿关系研究的若干趋势",
          time: "2004",
          type: "2",
          author: ["毛景文", "王志良"],
          refers: "105",
        },
        {
          paperID: "29",
          title: "肖家营子钼(铁)矿床高盐度包裹体及其意义",
          time: "2011",
          type: "3",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "4",
        },
        {
          paperID: "30",
          title: "豫西熊耳山西段热液脉状银铅锌矿床特征与成矿作用",
          time: "2005",
          type: "1",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "72",
        },
        {
          paperID: "31",
          title: "内蒙古拜仁达坝和维拉斯托矿床地球化学特征对比研究",
          time: "1995",
          type: "2",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "85",
        },
        {
          paperID: "32",
          title: "Manto型锡矿:一种重要的Sn成矿作用",
          time: "2020",
          type: "3",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "7",
        },
        {
          paperID: "33",
          title: "长江中下游大型矿集区燕山期岩浆岩的成因和构造背景",
          time: "2018",
          type: "1",
          author: ["毛景文", "王志良"],
          refers: "562",
        },
        {
          paperID: "34",
          title: "江西东乡枫林钨铜矿钨的表生富集和迁移",
          time: "2015",
          type: "2",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "1233",
        },
        {
          paperID: "35",
          title: "表生环境中钨矿物的风化分解及钨次生富集过程的模拟实验",
          time: "2006",
          type: "3",
          author: ["高阳", "毛景文", "叶会寿"],
          refers: "25",
        },
        {
          paperID: "36",
          title: "豫西公峪金矿床流体包裹体及He,Ar,S,H,O同位素研究",
          time: "2001",
          type: "1",
          author: ["王瑞廷", "秦西社", "袁海潮", "毛景文"],
          refers: "92",
        },
        {
          paperID: "37",
          title: "川滇黔交界地区铅锌矿床成矿模型",
          time: "2021",
          type: "2",
          author: ["毛景文", "李红艳", "袁海潮", "宋学信"],
          refers: "1532",
        },
        {
          paperID: "38",
          title: "胶东金城金矿床石英,黄铁矿及其包裹体稀土元素特征",
          time: "2004",
          type: "3",
          author: ["毛景文", "王志良"],
          refers: "155",
        },
        {
          paperID: "39",
          title: "内蒙古拜仁达坝和维拉斯托矿床地球化学特征对比研究",
          time: "2011",
          type: "1",
          author: ["韩春明", "毛景文", "杨建民", "王洪"],
          refers: "234",
        },
      ],
    };
  },
  created() {
    if( document.cookie != ""){
      this.isLogin=true;
    } 
    this.initPage();
    /* this.co_ins_list.sort((a1, a2) => a2.num - a1.num); */
  },
  components: {
    "bottom-info": bottomInfo, //挂载底部组件
    homePage,
    /* "word-cloud": wordCloud,
    pieChart,
    lineChart1,
    lineChart2, */
  },
  methods: {
    to_private_chat(){
      const formData = new FormData();
      formData.append("scholarId", this.scholarID);
      this.$axios({
        method: "post",
        header: { cookie: `sessionId=${document.cookie}` },
        url: "/api/requestPM",
        data: formData,
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 1001) {
          var chatboxID;
          chatboxID=res.data.chatBox.id;
          this.$router.push({name:"privatemessage",params:{chatboxid:chatboxID,targetid:this.claimed_user_id,}});
        } 
        else if(res.data.errno == 2001){
          chatboxID=res.data.chatBox.id;
          this.$router.push({name:"privatemessage",params:{chatboxid:chatboxID,targetid:this.claimed_user_id,}});
        }
        else if(res.data.errno == 3001){
          console.log("学者未被认领");
        }
        else if(res.data.errno == 4001){
          this.$message.error("不能私信自己认领的学者！");
        }
      });
    },
    reset_input(){
      this.dialogVisible=false;
      this.report_title="";
      this.report_content="";
    },
    copyLink() {
      // 复制链接
      let sharelink = location.href;
      this.$copyText(sharelink).then(
        (res) => {
          console.log(res);
          this.$message.success("已将分享链接复制到剪切板！");
        },
        (err) => {
          console.log(err);
        }
      );
    },
    to_paper_info(id) {
      this.$router.push("/paperInfo/" + id);
    },
    to_scholar_profile(id) {
      let routeData = this.$router.resolve({ path: `/scholarprofile/` + id });
      window.open(routeData.href, "_blank");
    },
    initPage() {
      this.$axios({
        method: "get",
        header: { cookie: `sessionId=${document.cookie}` },
        url: "/api/getScholarPage",
        params: {
          scholarId: this.$route.params.sid,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 100000) {
          //this.$message.success("获取学者信息成功");
          this.scholarID = res.data.post.data[0].id;
          this.scholarName = res.data.post.data[0].name;
          this.h_index = res.data.post.data[0].h_index;
          this.pubs = res.data.post.data[0].pubs;
          if (this.h_index === undefined) {
            this.h_index = 0;
          }
          this.n_pubs = res.data.post.data[0].n_pubs;
          if (this.n_pubs === undefined) {
            this.n_pubs = this.pubs.length;
          }
          //console.log(this.pubs);
          this.cooperator = res.data.post.cooperator;
          this.n_citation = res.data.post.data[0].n_citation;
          if (this.n_citation === undefined) {
            this.n_citation = 0;
          }
          this.isFollowed = res.data.followData.isFollow;
          this.isClaimed = res.data.authData.isAuth;
          this.claimed_user_name=res.data.authData.username;
          this.claimed_user_id=res.data.authData.userId;
          //console.log(res.data.followData.isFollow);
          if(res.data.post.data[0].orgs!=undefined && res.data.post.data[0].orgs.length>=1){
            this.cur_org = res.data.post.data[0].orgs[0];
          }
          this.initSelectYear();
          this.initCooperater();
        } else if (res.data.errno == 100001) {
          //this.$message.success("学者不存在");
          this.$router.push("/scholarnotfound");
        } else {
          this.$message.success("initPage其他错误");
        }
      });
    },
    to_scholar_claim() {
      if(this.isLogin==false){
        this.$router.push("/login");
      }
      this.$router.push("/scholarprofile/" + this.scholarID + "/claim");
    },
    report_error() {
      const formData = new FormData();
      formData.append("title", this.report_title);
      formData.append("description", this.report_content);
      formData.append("scholarId", this.scholarID);

      this.$axios({
        method: "post",
        header: { cookie: `sessionId=${document.cookie}` },
        url: "/api/report/scholar",
        data: formData,
      }).then((res) => {
        console.log(res);
        this.dialogVisible=false;
        if(res.data.errno==4003){
          this.$message.success("您的申诉已提交！");
        }
      });
    },
    set_dialog() {
      /* this.$prompt('请填写申诉理由（注意：当您的身份被他人冒领时，可以在下方填写申诉，我们将安排管理员为您进一步处理）', '申诉学者', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          this.$message({
            type: 'success',
            message: '您的申诉已提交!'
          });
          value
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消申诉'
          });       
        }); */
        if(this.isLogin==false){
        this.$router.push("/login");
      }
      this.dialogVisible = true;
    },
    joint_author_and_refers(author, refers) {
      if (author === undefined || author.length == 0) {
        return;
      }
      if (author.length >= 3) {
        return (
          author[0].name +
          ", " +
          author[1].name +
          ", " +
          author[2].name +
          ", ..." +
          " 被引量：" +
          refers
        );
      } else if (author.length === 2) {
        return author[0].name + ", " + author[1].name + " - 被引量：" + refers;
      } else if (author.length === 1) {
        return author[0].name + " - 被引量：" + refers;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    initCooperater() {
      var count = 0;
      for (let i = 0; i < this.cooperator.length && count < 5; i++) {
        if (this.cooperator[i].id != this.scholarID) {
          this.filter_cooperater.push(this.cooperator[i]);
          count++;
        }
      }
    },
    initSelectYear() {
      this.yearsList = [];
      this.yearsList.push({ value: 0, label: "全部年份" });
      var tmp = [];
      //console.log(this.pubs);
      for (let i = 0; i < this.pubs.length; i++) {
        //console.log(this.pubs[i].year);
        if (this.pubs[i].year != undefined) {
          tmp.push(this.pubs[i].year);
        }
        if (this.pubs[i].n_citation === undefined) {
          this.pubs[i].n_citation = 0; //数据没有就置为0
        }
      }
      var uniq = [...new Set(tmp)];
      uniq.sort(function (value1, value2) {
        return value2 - value1;
      });
      for (let i = 0; i < uniq.length; i++) {
        this.yearsList.push({ value: uniq[i], label: uniq[i] + "年" });
      }

      this.filterForm.year = this.yearsList[0].value;
      //this.filterForm.type = this.typesList[0].value;
      this.filterForm.author = this.authorsList[0].value;
      this.sort_type = this.sortsList[0].value;
    },
    follow() {
      console.log("登录状态"+this.isLogin);
      console.log(document.cookie);
      if(this.isLogin==false){
        this.$router.push("/login");
        return;
      }
      const formData = new FormData();
      formData.append("scholarId", this.scholarID);
      formData.append("scholarName", this.scholarName);

      this.$axios({
        method: "post",
        header: { cookie: `sessionId=${document.cookie}` },
        url: "/api/follow/",
        data: formData,
      }).then((res) => {
        console.log(res);
        if (res.data.errno == 1001) {
          this.isFollowed = true;
        } else {
          console.log("关注失败");
        }
      });
    },
    unfollow() {
      this.$axios({
        method: "post",
        header: { cookie: `sessionId=${document.cookie}` },
        url: "/api/follow/",
        data: this.$qs.stringify({
          scholarId: this.scholarID,
          scholarName: this.scholarName,
        }),
      }).then((res) => {
        //console.log(res);
        if (res.data.errno == 1001) {
          this.isFollowed = false;
        } else {
          console.log("取关失败");
        }
      });
    },
  },
  watch: {
    // 监听对象变化
    filterForm: {
      handler(val) {
        if (val) {
          // 如果筛选条件为默认，查全部；否则按条件筛选
          var objIsEmpty =
            this.filterForm.year == "0" && this.filterForm.author == "0";
          console.log(this.filterForm.year);
          if (objIsEmpty) {
            this.result = this.pubs.filter(
              (item) => item.title != undefined && item.title.length >= 1
            );
          } else {
            this.result = this.pubs.filter(
              (item) => item.title != undefined && item.title.length >= 1
            );
            if (this.filterForm.year != "0") {
              this.result = this.pubs.filter(
                (item) => item.year == this.filterForm.year
              );
            }
            if (this.filterForm.author != "0") {
              this.result = this.result.filter((item) => item.r == 0);
            }
          }

          //根据现有的排序方式排序, 因为之前this.result = this.paperList;打乱了排序
          if (this.sort_type === "1") {
            this.result.sort((a1, a2) => a2.n_citation - a1.n_citation);
          } else {
            this.result.sort((a1, a2) => a2.year - a1.year);
          }
        }
      },
      deep: true,
    },
    sort_type: {
      immediate: true,
      deep: true,
      handler() {
        if (this.sort_type === "1") {
          this.result.sort((a1, a2) => a2.n_citation - a1.n_citation);
        } else {
          this.result.sort((a1, a2) => a2.year - a1.year);
        }
      },
    },
  },
};
</script>

<style scoped>
.top_block {
  width: 75%;
  height: 250px;
  margin: auto;
  border-bottom: 1px solid rgb(220, 220, 220);
  /* background-color: blueviolet; */
}
.top_left {
  width: 20%;
  height: 100%;
  /* background-color: aquamarine; */
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.top_right {
  width: 60%;
  height: 100%;
  /* background-color:blue; */
  display: inline-block;
  vertical-align: top;
}
.head_portrait {
  height: 120px;
  width: 120px;
  border: 10px solid rgb(255, 255, 255);
  border-radius: 80px;
  box-shadow: 0 0 7px 2px #e0e4e9;
}
.button {
  margin-top: 20px;
  margin-left: 15px;
  background-color: rgb(73, 73, 184);
  border: 1px solid rgb(62, 62, 179);
  color: white;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
}
.button:hover {
  background-color: rgb(93, 93, 190);
}
.button2 {
  margin-top: 20px;
  margin-left: 15px;
  background-color: rgb(230, 230, 230);
  border: 1px solid rgb(164, 164, 164);
  color: rgb(114, 114, 114);
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
}
.button2:hover {
  background-color: rgb(241, 241, 241);
}
.fa.fa-heart-o {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  top: 2px;
  margin-left: 15px;
  color: rgb(62, 62, 179);
}
.fa.fa-heart-o:hover {
  cursor: pointer;
}
.fa.fa-heart {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  top: 2px;
  margin-left: 15px;
  color: rgb(220, 97, 97);
}
.fa.fa-heart:hover {
  cursor: pointer;
}
.scholar_name {
  font-size: 30px;
  margin-top: 20px;
  color: rgb(51, 51, 51);
  display: inline-block;
}
.follow {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  color: rgb(148, 148, 148);
}
.institution {
  font-size: 13px;
  margin-top: -20px;
  color: rgb(72, 72, 72);
}
.top_title_block1 {
  width: 12%;
  display: inline-block;
  border-right: 2px solid rgb(237, 237, 237);
}
.top_title_block2 {
  width: 12%;
  margin-left: 1%;
  display: inline-block;
  border-right: 2px solid rgb(237, 237, 237);
}
.top_title_block3 {
  width: 12%;
  margin-left: 1%;
  display: inline-block;
}
.top_title {
  font-weight: bold;
  color: rgb(44, 44, 122);
}
.top_data {
  font-size: 20px;
  color: #afafaf;
}
.scholarID {
  width: 300px;
  height: 25px;
  /*  background-color: #f5f5f5; */
  box-shadow: 0 0 4px 2px #e0e4e9;
  text-align: center;
  border-radius: 2px;
}
.scholarID_word1 {
  display: inline-block;
  font-size: 14px;
  color: rgb(148, 148, 148);
  position: relative;
  bottom: 11px;
}
.scholarID_word2 {
  display: inline-block;
  font-size: 14px;
  color: #4e64ba;
  position: relative;
  bottom: 11px;
}
.middle {
  width: 75%;
  margin: auto;
  /* background-color: aqua; */
}
.middle_left {
  width: 68%;
  height: 100%;
  /* background-color: rgb(47, 117, 117); */
  display: inline-block;
  vertical-align: top;
}
.graph_part1 {
  width: 95%;
  /* background-color: rgb(81, 23, 181); */
}
.pie1 {
  display: inline-block;
  margin-top: -10px;
  margin-left: -3%;
}
.pie2 {
  display: inline-block;
  margin-top: -10px;
  margin-left: -8%;
}
.pie3 {
  display: inline-block;
  margin-top: -10px;
  margin-left: -8%;
}
.pie4 {
  display: inline-block;
  margin-top: -10px;
  margin-left: -8%;
}
.total_pie {
  display: inline-block;
  vertical-align: top;
  /* background-color: bisque; */
  margin-left: -1%;
}
.total_pie_title {
  font-size: 14px;
  text-align: center;
  margin-top: 55px;
  color: rgb(78, 78, 78);
}
.total_pie_num {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: -10px;
  color: rgb(38, 38, 106);
}
.graph_part2 {
  width: 95%;
  /* background-color: rgb(80, 201, 15); */
  border-top: 1px solid rgb(220, 220, 220);
  border-bottom: 1px solid rgb(220, 220, 220);
  padding-bottom: 20px;
  margin-top: -15px;
}
.line1 {
  display: inline-block;
  margin-left: -1%;
}
.line2 {
  display: inline-block;
}
.line_chart_title {
  font-size: 10px;
  color: rgb(94, 94, 94);
  text-align: center;
  margin-bottom: -40px;
}
.papers {
  width: 100%;
  /* background-color: rgb(236, 14, 217); */
}
.middle_right {
  width: 32%;
  height: 100%;
  /* background-color: rgb(188, 122, 42); */
  display: inline-block;
}
.co_scholar {
  width: 100%;
  border-bottom: 1px solid rgb(220, 220, 220);
  padding-bottom: 15px;
  /* background-color: rgb(121, 255, 193); */
}
.co_scholar_title {
  color: rgb(45, 45, 45);
  margin-top: 25px;
}
.co_institution {
  width: 100%;
  /* background-color: rgb(255, 219, 99); */
}
.paper_select {
  margin-top: 20px;
}
.paper_show {
  margin-top: 20px;
  width: 95%;
}
.paper_title {
  font-weight: bold;
  margin-left: 2%;
  color: rgb(93, 93, 190);
  display: inline-block;
}
.paper_title:hover {
  cursor: pointer;
}
.paper_type {
  display: inline-block;
  font-size: 12px;
  margin-left: 1%;
  color: white;
  /* background-color: #21d4fd;
  background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%); */

  background-color: #aab0bb;

  padding-left: 4px;
  padding-right: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 3px;
}
.paper_info {
  margin-top: -20px;
}
.paper_time {
  display: inline-block;
  margin-left: 2%;
  font-size: 12px;
  color: rgb(255, 81, 0);
  /* font-weight: bold; */
  padding-right: 1%;
}
.paper_author {
  display: inline-block;
  font-size: 10px;
}
.co_scholar_institution {
  margin-top: -5px;
  font-size: 12px;
}
.co_scholar_name {
  font-size: 15px;
}
.co_scholar_name:hover {
  cursor: pointer;
  color: rgb(62, 62, 179);
}
.co_ins_name {
  display: inline-block;
  font-size: 13px;
}
.co_ins_num {
  display: inline-block;
  font-size: 13px;
  color: rgb(255, 81, 0);
}
.bottom_info {
  margin-top: 40px;
  padding-bottom: 40px;
}
.el-icon-warning {
  font-size: 23px;
  margin-left: 5px;
  color: #d33d3d;
}
.el-icon-warning:hover {
  cursor: pointer;
}
v::deep .selectbox .el-input--small input::-webkit-input-placeholder {
  color: rgb(136, 136, 136);
}

input::-webkit-input-placeholder {
  /* 使用webkit内核的浏览器 */
  color: rgb(196, 199, 206);
}
input:-moz-placeholder {
  /* Firefox版本4-18 */
  color: rgb(196, 199, 206);
}
input::-moz-placeholder {
  /* Firefox版本19+ */
  color: rgb(196, 199, 206);
}
input:-ms-input-placeholder {
  /* IE浏览器 */
  color: rgb(196, 199, 206);
}
::v-deep .el-input__inner {
  border: none;
  box-shadow: none;
}
.graph_part_title {
  text-align: center;
}
.report_title {
  width: 300px;
}
.report_title_input {
  width: 300px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #606060;
}
.report_title_input:focus {
  border: 1px solid #ffffff;
  outline: 2px solid #516bb8;
}
.report_title_input:hover {
  border: 1px solid #ffffff;
  outline: 2px solid #516bb8;
}
.report_content {
  width: 300px;
}
.report_content_input {
  width: 300px;
  border-radius: 2px;
  border: 1px solid #606060;
  font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
}
.report_content_input:focus {
  border: 1px solid #ffffff;
  outline: 2px solid #516bb8;
}
textarea::-webkit-input-placeholder {
  color: rgb(189, 189, 189);
}
.report_content_input:hover {
  border: 1px solid #ffffff;
  outline: 2px solid #516bb8;
}
.claimed_user{
  display:inline-block;
  font-size: 14px;
}
.private_chat{
  display:inline-block;
  font-size: 12px;
  color: rgb(255, 81, 0);
}
.private_chat:hover{
  cursor: pointer;
}
</style>